<template>
    <div class="progress" :class="animate == true ? 'progress-striped active' : ''">
        <div :class="'progress-bar ' + color" role="progressbar"
             aria-valuenow="20" :aria-valuemin="min" :aria-valuemax="max"
             v-bind:style="{width: percentage + '%'}">
            <span class="sr-only">{{percentage}}% 完成</span>
        </div>
    </div>
</template>

<script>
    export default {
    	name: 're-progress',
        props: {
            color: {default: ''},
            min: {type: Number, default: 0},
            max: {type: Number, default: 100},
            percentage: {type: Number, default: 0},
            animate: {type: Boolean, default: false}
        }
    };
</script>
